<template>
    <div class="page">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img class="img01" src="./img/Page01.png"/>
                    今日订单总数<span class="el-data">200</span>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img class="img01" src="./img/Page02.png"/>
                    今日销售总额<span class="el-data">¥5000.00</span>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img class="img01" src="./img/Page03.png"/>
                    昨日销售总额<span class="el-data">¥5000.00</span>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <img class="img01" src="./img/Page04.png"/>
                    近7天销售总额<span class="el-data">¥5000.00</span>
                </div>
            </el-col>
        </el-row>

        <div class="frame" style="background-color: #FFFFFF">
            <el-header class="header">代处理事务</el-header>
            <div>
                <div class="per">
                    <span>你有内容正在处于编译状态,请尽快处理</span>
                    <span>()</span>
                </div>
                <div class="per02">
                    <span>您有视频代审核,请尽快处理</span>
                    <span>()</span>
                </div>
            </div>
        </div>

        <div class="frame" style="background-color: #FFFFFF;height: 200px;">
            <el-header class="header">运营快捷入口</el-header>
            <div >
                <img class="img02" src="./img/Page05.png">
                <span>添加商品</span>

                <img class="img02" src="./img/Page06.png">
                <span>添加课程</span>

                <img class="img02" src="./img/Page07.png">
                <span>订单列表</span>

                <img class="img02" src="./img/Page08.png">
                <span>人事部门</span>

                <img class="img02" src="./img/Page09.png">
                <span>微圈管理</span>

                <img class="img03" src="./img/Page10.png">
                <span>商品审核管理</span>

                <img class="img03" src="./img/Page11.png">
                <span>课程审核管理</span>
            </div>
        </div>

        <div class="commercial">
            <el-header class="header">商品总览</el-header>
            <div>
                <span class="el-number">100</span>
                <a>课程数量(已上架)</a>

                <span class="el-number">400</span>
                <a>商品数量(已上架)</a>
            </div>
        </div>

        <div class="user">
            <el-header class="header">用户总览</el-header>
        </div>


    </div>
</template>

<script>
    export default {
        name: "Page",
    }
</script>

<style scoped>
    .bg-purple {
        background: #FFFFFF;
    }
    .grid-content {
        border-radius: 4px;
        min-height: 73px;
    }
    .img01{
        margin: 15px 8px -31px 11px;
    }
    .el-data{
        margin: 0px 0px 0px 76px;
    }
    .header{
        /*头部背景色*/
        background-color: #DDDFE2;
        /*字体颜色*/
        color: #0D0D0D;
        /*行高*/
        line-height: 60px;
    }
    .frame{
        margin-top: 50px;
        /*边框*/
        border:1px solid silver;
    }
    .per{
        border-bottom:1px solid silver;
        margin: 25px 705px 0px 31px;
    }
    .per02{
        border-bottom:1px solid silver;
        margin: -23px 47px 15px 770px;
    }
    span{
        margin-right: 30px;
    }
    .img02{
        margin:33px -56px 24px 31px;
    }
    .img03{
        margin:38px -71px 27px 39px;
    }
    .commercial{
        background-color: #FFFFFF;
        height: 280px;
        margin:50px 588px 0px 0px;
        /*边框*/
        border:1px solid silver;
    }
    .user{
        background-color: #FFFFFF;
        height: 280px;
        margin:-282px 0px 0px 582px;
        /*边框*/
        border:1px solid silver;
    }
    .el-number{
        color: red;
       font-size: 50px;
    }

</style>
